<template>
	<view class="container">
		<view v-if="editList.length == 0" style="width: 100%;height: 80upx;margin-top: 20upx;text-align: center;font-size: 30upx;line-height: 80upx;">
			没有任何存档
		</view>
		<block v-else>
			<scroll-view scroll-y class="scrollView">
				<block v-for="(item,index) in editList" :key="index">
					<view class="partOutContainer">
						<view class="partContainer">
							<view class="top">
								<view class="leaveType">
									请假类型:
									<view class="leaveTypeText" v-if="item.leaveInfoType == 0">
										少于三天
									</view>
									<view class="leaveTypeText" v-else-if="item.leaveInfoType == 1">
										超过三天少于一周
									</view>
									<view class="leaveTypeText" v-else-if="item.leaveInfoType == 2">
										超过一周
									</view>
								</view>
								<view class="leaveReason">
									原因:
									<view class="leaveResonText">
										<block v-if="item.leaveInfoReason.length > 23">
											{{item.leaveInfoReason.substring(0,23)}}......
										</block>
										<block v-else>
											{{item.leaveInfoReason}}
										</block>
									</view>
								</view>
							</view>
							<view class="bottom">
								<view class="editTime">
									编辑时间:
									<view class="timeText">
										{{item.leaveInfoStart}}
									</view>
								</view>
								<view class="edit">
									<view class="editR" @tap="edit(item.leaveInfoId)">
										编辑
									</view>
									<view class="editD" @tap="del(item.leaveInfoId)">
										删除
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</block>
	</view>
</template>

<script>
	import * as api from '../config/api.js'
	export default {
		data(){
			return{
				editList:[]
			}
		},
		onLoad() {
			// 获取存档测试
			this.getSaveList()
		},
		methods:{
			getSaveList(){
				let leaveUserNum = uni.getStorageSync('leaveUserNum')
				let that = this;
				api.getStatusByTypeApi(leaveUserNum,5,{
					data:{},
					success:res=>{
						if(res.code == 200){
							console.log("成功")
							console.log(res)
							that.editList = res.data
						}else if(res.code == 500){
							uni.showToast({
								title:"暂无数据",
								icon:"none"
							})
						}else{
							uni.showToast({
								title:"请求失败",
								icon:"none"
							})
						}
					},
					fail:err=>{
						// console.log(err)
						uni.showToast({
							title:"网络延迟",
							icon:"none"
						})
					}
				})
			},
			edit(id){
				// console.log("编辑信息Id:"+id)
				// 获取要编辑的id,然后根据id发送请求获取编辑列表，跳转页面传递数据
				api.getLeaveInfoByIdApi(id,{
					data:{},
					success:res=>{
						// console.log("成功")
						// console.log(res)
						if(res.code == 200){
							let obj = res.data
							// console.log(obj)
							// 获取数据跳转页面
							uni.navigateTo({
								url:"/pages/component/leaveInfo?id="+id,
								success:function(res){
									// 通过eventChannel向被打开页面传送数据
									res.eventChannel.emit('obj', { 
										obj:obj
									})
								}
							})
						}else{
							uni.showToast({
								title:"信息有误",
								icon:"none"
							})
						}
					},
					fail:err=>{
						uni.showToast({
							title:"网络延迟",
							icon:"none"
						})
					}
				})
			},
			del(id){
				// console.log("删除信息Id:"+id)
				let that = this
				api.delLeaveInfoByIdApi(id,{
					data:{},
					success:res=>{
						if(res.code == 200){
							// console.log("成功")
							// console.log(res)
							this.getSaveList()
						}else{
							uni.showToast({
								title:"删除失败",
								icon:"none"
							})
						}
					},
					fail:err=>{
						uni.showToast({
							title:"网络延迟",
							icon:"none"
						})
					}
				})
				// 删除存档
				// 通过模拟for循环查找删除当前存档,修改现在的数组
				// let list = this.editList
				// for (var i = 0 ; i < list.length ; i++){
				// 	if(id == list[i].id){
				// 		list.splice(i,1)
				// 		break;
				// 	}
				// }
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		padding: 10upx 0 30upx 0;
		/* background-color: #0000FF; */
	}
	.scrollView{
		width: 100%;
		height: 100%;
		padding: 30upx 30upx 10upx 30upx;
		/* background-color: white; */
	}
	.partOutContainer{
		width: 94%;
		margin-left: 3%;
		height: 260upx;
		padding-bottom: 30upx;
	}
	.partContainer{
		width: 100%;
		height: 230upx;
		padding: 20upx 20upx 5upx 20upx;
		background-color: white;
		border-radius: 0.3em;
		position: relative;
		box-shadow: 1px 1px 1px 1px rgba(208, 208, 208, 1.0);
	}
	.top{
		width: 100%;
		display: flex;
		height: 120upx;
	}
	.leaveType{
		font-size: 32upx;
		font-weight: 600;
		height: 60upx;
		color: black;
		float: left;
		width: 40%;
		display: inline-block;
	}
	.leaveTypeText{
		color: gray;
		font-size: 28upx;
		font-weight: 500;
	}
	.leaveReason{
		float: right;
		width: 60%;
		font-size: 32upx;
		font-weight: 600;
		height: 60upx;
		color: black;
		display: inline-block;
	}
	.leaveResonText{
		color: gray;
		font-size: 28upx;
		font-weight: 500;
	}
	.bottom{
		width: 100%;
		display: flex;
		height: 80upx;
	}
	.editTime{
		font-size: 32upx;
		font-weight: 600;
		height: 40upx;
		color: black;
		float: left;
		width: 40%;
	}
	.timeText{
		color: gray;
		font-size: 28upx;
		font-weight: 500;
	}
	.edit{
		float: right;
		position: absolute;
		right: 31upx;
		font-weight: 500;
		font-size: 30upx;
		bottom: 20upx;
		display: flex;
	}
	.editR{
		color: #0000FF;
		text-decoration: underline;
	}
	.editD{
		margin-left: 40upx;
		color: red;
		text-decoration: underline;
	}
</style>
